import { Card } from 'antd';

const UserGrowth: React.FC = () => {
  return (
    <Card title="用户月度增长率" size="small" style={{ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)', borderRadius: '8px' }}>
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '140px' }}>
        <div style={{
          width: '120px',
          height: '120px',
          borderRadius: '50%',
          border: '8px solid #e0e7ff',
          borderBottom: '8px solid #22c55e',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          position: 'relative',
          transition: 'transform 2s ease-in-out',
          transform: 'rotate(137deg)',
        }}>
          <div style={{
            textAlign: 'center',
            transform: 'rotate(-137deg)',
          }}>
            <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#22c55e' }}>38%</div>
            <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>同比增长</div>
          </div>
        </div>
      </div>
    </Card>
  );
};

export default UserGrowth;